<template>
  <div class="edit-personal-info-content">
    <el-form label-position="top" v-loading="formLoading" :model="form" :rules="rules" ref="form">
      <el-row>
        <el-col class="user-block" :span="24">
          <div class="info-block">
            <div class="name-item">
              <div class="name">上传头像</div>
              <div class="describe">数据表明招聘者对真实头像更有好感</div>
            </div>
            <UploadFile :imageUrl="form.faceUrl?[form.faceUrl]:[]" @uploadSuccess="uploadSuccess" ref="upload" :accept="['jpg','jpeg','png']" :autoUpload="true"></UploadFile>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model="form.realName" maxlength="10"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-radio v-model="form.sex" :label="1" border>男</el-radio>
            <el-radio v-model="form.sex" :label="2" border>女</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker
                v-model="form.birthday"
                placement="bottom-start"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                type="date"
                placeholder="请选择出生日期"
                :picker-options="{disabledDate}"
                :default-value="timeDefaultShow"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目前状态" prop="status">
            <el-select v-model="form.jobStatus" placeholder="请选择">
              <el-option
                  v-for="item in jobStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <!--        <el-col :span="12">-->
        <!--          <el-form-item label="手机号码" prop="mobile">-->
        <!--            <el-input v-model="form.user.mobile" :disabled="true"></el-input>-->
        <!--            <span class="change">修改</span>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.eml" placeholder="选填"></el-input>
            <!--            <span class="change">修改</span>-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="微信号" prop="weChat">
            <el-input v-model="form.weChat" maxlength="18" placeholder="选填"></el-input>
            <!--                        <span class="change">修改</span>-->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import UploadFile from "@/components/Upload/UploadFile";
import {getUserCustomer, submitUserCustomer} from "@/api/mineCenter";

export default {
  name: "PersonalInfo",
  components: {UploadFile},
  emits: ['refresh'],
  data() {
    return {
      jobStatus: [
        {value: 0, label: "暂无"},
        {value: 1, label: "离职-随时到岗"},
        {value: 2, label: "在职-月内到岗"},
        {value: 3, label: "在职-考虑机会"},
        {value: 4, label: "在职-暂不考虑"},
      ],
      formLoading:false,
      form: {
        faceUrl: '',
        sex: 1,
        realName: '',
        birthday: '',
        jobStatus: 3,
        eml: '',
        weChat: '',
      },
      timeDefaultShow:'',
      rules: {
        realName: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
        birthday: [
          {required: true, message: '请选择时间', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请选择性别', trigger: 'blur'}
        ],
        jobStatus: [
          {required: true, message: '请选择当前状态', trigger: 'blur'}
        ],
        // weChat: [
        //   {required: true, message: '请填写微信号', trigger: 'blur'}
        // ]
      }
    }
  },
  methods: {
    uploadSuccess(e){
      this.form.faceUrl=e.data;
    },
    disabledDate(time){
      const date=new Date();
      date.setFullYear(date.getFullYear()-16);
      return time.getTime()>date.getTime();
    },
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if(this.formLoading){
            this.$message.warning('请等待加载完成');
            return;
          }
          const loading = this.$loading({text: '提交中'})
          submitUserCustomer(this.form).then(()=>{
            this.$message.success('保存成功');
            this.$emit('refresh',0)
          }).finally(()=>{
            loading.close()
          })
        }
      });
    },
    getDetail(){
      this.formLoading=true
      getUserCustomer({}).then((res)=>{
        this.form=res;
      }).finally(()=>{
        this.formLoading=false;
      }).catch(()=>{
        this.$emit('refresh',0);
      })
    }
  },
  mounted() {
    this.getDetail();
    this.timeDefaultShow = new Date();
    this.timeDefaultShow.setFullYear(new Date().getFullYear() - 20);
  }
}
</script>

<style lang="scss" scoped>
.edit-personal-info-content {
  padding: 0 60px;

  .el-date-editor, .el-select {
    width: 100%;
  }

  .el-form-item__content {
    position: relative;
  }

  .change {
    color: $orange;
    font-size: 14px;
    position: absolute;
    width: 30px;
    transform: translate(-50%, -50%);
    top: 50%;
    right: 0;
    cursor: pointer;
  }

  .user-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 16px;

    .user-photo {
      width: 65px;
      height: 65px;
      border-radius: 50%;
    }

    .info-block {
      width: calc(100% - 80px);
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .name-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 20px;

        .name {
          color: $orange;
          font-size: 20px;
          cursor: pointer;
          margin-right: 10px;
        }

        .describe {
          margin-top: 10px;
          color: $darkGray;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
